<template>
	<view class="bg-white p-2">
		<!-- 交易日期 -->
		<view class="font-sm flex flex-column py-1 px-2 justify-between" style="width: 2000rpx;">
			<view class="flex justify-between align-center w-100">
				<view class="flex align-center mr-4">
					<text class="mr-1">签订开始时间:</text>
					<view style="width: 250rpx;">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
					</view>
				</view>
				<view class="flex align-center">
					<text class="mr-1">签订结束时间:</text>
					<view style="width: 250rpx;">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
					</view>
				</view>
				<view class="flex align-center pl-2" style="border: 2rpx solid rgb(221,221,211);">
					<input style="width: 350rpx;" placeholder-class="font-small" placeholder="请输入合同编号/合同名称/客户名/备注进行搜索" type="text">
					<button class="font-sm flex-1" style="height: 70rpx;line-height: 70rpx;" type="button">搜索</button>
				</view>
				<view style="width: 650rpx;">
					<uni-data-select placeholder="请选择合同类型" v-model="Selectvalue" :localdata="range" @change="change"></uni-data-select>
				</view>
			</view>
		    <!-- 表格 -->
		    <view class="mt-2 flex flex-column">
		    	<view class="w-100 flex font-sm font-weight-bold"
		    		style="background-color: rgb(245,245,245);height: 80rpx;">
		    		<view class="text-center" style="width: 21%;line-height: 80rpx;">
		    			<text>对方公司</text>
		    		</view>
		    		<view class=" text-center" style="width: 13%;line-height: 80rpx;">
		    			<text>合同状态</text>
		    		</view>
		    		<view class=" text-center" style="width: 13%;line-height: 80rpx;">
		    			<text>其他操作</text>
		    		</view>
		    		<view class=" text-center" style="width: 13%;line-height: 80rpx;">
		    			<text>发布时间</text>
		    		</view>
		    		<view class=" text-center" style="width: 20%;line-height: 80rpx;">
		    			<text>备注</text>
		    		</view>
					<view class=" text-center" style="width: 20%;line-height: 80rpx;">
						<text>操作</text>
					</view>
		    	</view>
		    	<view v-if="false" style="height: 200rpx;" class="w-100 flex justify-center align-center">
		    		暂无数据
		    	</view>
		    	<view v-else class="flex font-sm" style="height: 150rpx;border-bottom:2rpx solid rgb(221,221,211);"
		    		v-for="(item,index) in 4" :key="index">
		    		<view class=" flex justify-center align-center" style="width: 21%;line-height: 70rpx;">
		    			<text>黑龙江集货邦数字供应有限公司</text>
		    		</view>
		    		<view class="flex align-center justify-center" style="width: 13%;line-height: 70rpx;">
		    			<view class="flex justify-center">
		    				<text class="text-orange">已签订</text>
		    			</view>
		    		</view>
					<view class="flex align-center justify-center" style="width: 13%;line-height: 70rpx;">
						<view class="flex justify-center">
							<text>无</text>
						</view>
					</view>
		    		<view class="flex align-center justify-center" style="width: 13%;line-height: 70rpx;">
		    			<view class="flex justify-center">
		    				<text>2018-08-31</text>
		    			</view>
		    		</view>
		    		<view class="flex align-center justify-center" style="width: 20%;line-height: 70rpx;">
		    			<text>测试文字拉拉拉啊啦啦</text>
		    		</view>
		    		<view class="flex align-center justify-center" style="width: 20%;line-height: 70rpx;">
		    			<button class="font-sm bg-success text-white flex justify-center align-center"
		    				style="white-space: nowrap; width: 100rpx;height: 100rpx;">查看</button>
		    			<button class="font-sm bg-danger text-white flex justify-center align-center"
		    				style="white-space: nowrap;width: 100rpx;height: 100rpx;">删除</button>
		    		</view>
		    	</view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Nontransactionalcontracts",
		data() {
			return {
				single:'',
				Selectvalue:'',
				range: [{
						value: 0,
						text: "寄售框架合同"
					},
					{
						value: 1,
						text: "普通非交易合同"
					},
					{
						value: 2,
						text: "补充协议合同"
					},
					{
						value: 3,
						text: "发票承诺函"
					},
					{
						value: 4,
						text: "采购框架合同"
					},
					{
						value: 5,
						text: "销售框架合同"
					},
					{
						value: 6,
						text: "线下采购框架合同"
					},
					{
						value: 7,
						text: "线下销售框架合同"
					},
					{
						value: 8,
						text: "物流费用对账函"
					},
					{
						value: 9,
						text: "油脂购销销售合同改价协议"
					},
					{
						value: 10,
						text: "油脂购销销售合同确价协议"
					},
					{
						value: 11,
						text: "延期协议"
					},
					{
						value: 12,
						text: "云签约补充协议合同"
					},
					{
						value: 13,
						text: "客户服务费率调整协议"
					},
					{
						value: 14,
						text: "代拍业务货物出库服务协议"
					},
					{
						value: 15,
						text: "代拍业务质量确认补充协议"
					},
					{
						value: 16,
						text: "代拍业务质量上游授权委托书"
					},
					{
						value: 17,
						text: "代拍业务质量下游授权委托书"
					},
					{
						value: 18,
						text: "代拍业务授权委托书附件(一般为身份证复印件)"
					},
					{
						value: 19,
						text: "代拍业务验收确认补充协议"
					},
					{
						value: 20,
						text: "竞价交易商务申请书"
					},
					{
						value: 21,
						text: "自定义业务补充协议"
					},
					{
						value: 22,
						text: "购销采购结算协议"
					},
					{
						value: 23,
						text: "购销销售结算协议"
					},
					{
						value: 24,
						text: "代拍销售结算协议"
					},
				],
			};
		},
		methods:{
			maskClick(e){
				console.log(e)
			},
			change(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">

</style>